【CSS】CSS 处理空白、换行、制表符

2023-09-23 12:21| 来源: 网络整理| 查看: 265

;ddd ddd ddd

在html文档中，有此节点，需要展示换行效果，该如何处理才有换行呢？

1. 使用 < pre > 标签

pre 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 < pre > 开始标签后的换行符也会被省略)

pre标签默认样式：

pre { display: block; font-family: monospace; white-space: pre; /**css 处理空白属性**/ margin: 1em 0px; }

在使用pre标签的时候，往往需要自设一下pre标签的样式。

2. 使用css属性 white-space

white-space 属性，它影响用户代理对文档源码中的空格、换行符和制表符的处理方式。

其中，pre值-保留标记中的空白，在此方面跟< pre >标签效用一致。

下面的表格总结了各种 white-space 值的行为：

换行符空格和制表符文字换行行尾空格normal合并合并换行删除nowrap合并合并不换行删除pre保留保留不换行保留pre-wrap保留保留换行挂起pre-line保留合并换行删除break-spaces保留保留换行换行

文章摘取：https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

【本文地址】

今日新闻